<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Git Explorer</title>

    <link rel="stylesheet" href="css/codemirror.css">
    <link rel="stylesheet" href="css/highlight.css">
    <link rel="stylesheet" href="css/uikit.min.css">
    <link rel="stylesheet" href="css/uikit.almost-flat.min.css">
    <link rel="stylesheet" href="css/git-explorer.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/codemirror.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/uikit.min.js"></script>
    <script src="js/git-explorer.js"></script>

    <script>
        $(function () {
            $('a[class="git-explorer"]').each(function () {
                let
                    dom = $(this).get(0),
                    url = $(this).attr('href');
                createGitExplorer(dom, url);
            });
        })
    </script>
</head>

<body>
    <div id="header" class="uk-navbar">
        <div class="uk-container">
            <div id="navbar">
                <a id="brand" href="/" class="uk-navbar-brand">GitHub Explorer</a>
            </div>
        </div>
    </div>

    <div id="main" style="margin-top:15px">
        <div class="uk-container">
            <div class="uk-grid">
                <div class="uk-width-1-1">
                    <div class="uk-flex">
                        <div class="uk-flex-item-1" style="padding-right:15px; border-right:1px solid #ccc;">
                            <div id="x-content">
                                <h3>Git Explorer</h3>
                                <p>Git Explorer turns any GitHub-compabible link to embedded explorer in web page:
                                </p>
                                <p>
                                    <a class="git-explorer"
                                        href="https://github.com/michaelliao/git-explorer/tree/master/sample">https://github.com/michaelliao/git-explorer/tree/master/sample</a>
                                </p>
                                <p>GitHub-compabible link:</p>
                                <p>
                                    <a class="git-explorer"
                                        href="https://gitee.com/liaoxuefeng/summer-framework/tree/master/framework/summer-web">https://gitee.com/liaoxuefeng/summer-framework/tree/master/framework/summer-web</a>
                                </p>
                                <p>The invalid link keeps unchanged:</p>
                                <p>
                                    <a class="git-explorer"
                                        href="https://github.com/michaelliao/repo-not-exist/tree/master">https://github.com/michaelliao/repo-not-exist/tree/master</a>
                                </p>
                                <p>TODO:</p>
                                <p>
                                    <li>Fix CSS issues for &lt;pre&gt;</li>
                                    <li>Make the explorer tree view resizable.</li>
                                    <li>Add highlight for displaying code.</li>
                                    <li>Add preview for images.</li>
                                    <li>Add download link for each file.</li>
                                    <li>Add zip download.</li>
                                </p>
                            </div>
                        </div>
                        <div class="uk-flex-item-none"
                            style="display:block; float:right; padding:15px; width:200px; box-sizing:border-box;">
                            <div id="x-sidebar-right-content" class="x-sidebar-right-content">
                                <h3>Right Side Bar</h3>
                                <p>Blablabla...</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="footer">
        <div class="uk-container x-container">
            <hr>
            <div class="uk-grid">
                <div class="uk-width-1-1" style="margin-bottom:20px;">
                    <p>GitHub Explorer, copyleft @ 2023
                        -
                        <a href="https://github.com/michaelliao/git-explorer" target="_blank">Source Code</a>
                        -
                        <a href="https://github.com/michaelliao/git-explorer/blob/master/LICENSE" target="_blank">GPLv3
                            License</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>